/**
 * 负责与分销相关的canvas绘画
 */

import type { ApiOrderTypes } from "@/api/api-types/api-order-types";
import PD from "..";
import type { ComponentPublicInstance } from "vue";

/**
 * 绘制分销订单分享图片
 */
type Ops = {
	ctx: UniApp.CanvasContext, //
	canvasId: string,
	componentIns?: ComponentPublicInstance,
	width: number, //canvas宽度
	height: number, //canvas高度
	order: ApiOrderTypes.OrderDto, //订单信息
}
export function drawOrderShareImageurl(ops: Ops): Promise<string> {
	return new Promise(async (r) => {
		const ctx = ops.ctx;
		const order = ops.order;
		const w = uni.upx2px(ops.width);
		const h = uni.upx2px(ops.height);
		//清除画布
		ops.ctx.clearRect(0, 0, w, h);
		//背景图
		const bgImg = await PD.UniHelp.downloadFile(PD.PdHelp.getCosImg('haoguanjia/share-order2.png'));
		ctx.drawImage(bgImg, 0, 0, w, h);//背景图
		const left = 40;
		//订单信息-时间
		PD.Tool.canvasFillText(ctx, {
			fontSize: 24,
			textAlign: 'left',
			boldText: true,
			color: '#000',
			text: `${PD.Filters.Order.OrderTime(order.depart_time_left, order.arrive_time_right)} ${order.channel_name}`,
			x: left,
			y: 60
		});
		//订单信息-拼包车人数
		PD.Tool.canvasFillText(ctx, {
			fontSize: 24,
			boldText: true,
			textAlign: 'left',
			color: '#FF5C00',
			text: `${PD.Filters.Order.NumDispose(order.business_id, order.num)}`,
			x: left,
			y: 100
		});

		//起点地址
		PD.Tool.canvasFillText(ctx, {
			fontSize: 50,
			boldText: true,
			textAlign: 'left',
			color: '#49AB6E',
			text: '·',
			x: left,
			y: 150,
		});
		const departY = PD.Tool.canvasFillTextWithWrap(ctx, {
			fontSize: 24,
			textAlign: 'left',
			boldText: false,
			color: '#848484',
			text: `${order?.departure.city}${order?.departure.address}`,
			x: left + 30,
			y: 140,
			maxWidth: 300,
			lineHeight: 70
		});
		//终点地址
		PD.Tool.canvasFillText(ctx, {
			fontSize: 50,
			boldText: true,
			textAlign: 'left',
			color: '#FC894D',
			text: '·',
			x: left,
			y: departY + 50,
		});
		PD.Tool.canvasFillTextWithWrap(ctx, {
			fontSize: 24,
			boldText: false,
			textAlign: 'left',
			color: '#848484',
			text: `${order?.destination.city}${order?.destination.address}`,
			x: left + 30,
			y: departY + 40,
			maxWidth: 300,
			lineHeight: 70
		});

		//司机到手价
		PD.Tool.canvasFillText(ctx, {
			fontSize: 22,
			textAlign: 'left',
			text: '司机到手价',
			color: '#000',
			boldText: true,
			x: left + 10,
			y: 264,
		});
		const price = String(order?.price.driver_fee);
		const priceDrawRes = PD.Tool.canvasFillText(ctx, {
			fontSize: 40,
			textAlign: 'left',
			text: price,
			color: '#FF5C00',
			boldText: true,
			x: left + 10,
			y: 305,
		});
		PD.Tool.canvasFillText(ctx, {
			fontSize: 10,
			text: '元',
			boldText: false,
			color: '#FF5C00',
			x: priceDrawRes.x + priceDrawRes.metrics.width + 2,
			y: priceDrawRes.y - 2,
		}, false);

		ctx.draw(false, () => {
			PD.UniHelp.canvas2tempFilePath(ops.canvasId, ops?.componentIns as ComponentPublicInstance ).then(filePath => {
				r(filePath);
			});
		});
	});
}